<template>
  <v-overlay :model-value="isActive" class="align-center justify-center">
    <v-card>
      <v-icon v-if="isInfo">mdi-information-outline</v-icon>
    <v-icon v-if="isWarning">mdi-alert-circle-outline</v-icon>
    <v-icon v-if="isError">mdi-alert</v-icon>
    {{ message }}
    </v-card>
  </v-overlay>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'
const isActive = ref(false)
const message = ref('')
enum MsgType {
  Error,
  Warning,
  Info
}
const type = ref(MsgType.Info)

const isError = computed(() => type.value === MsgType.Error)
const isWarning = computed(() => type.value === MsgType.Warning)
const isInfo = computed(() => type.value === MsgType.Info)

function sleep(ms:number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

const show = async (ms:number)=>
{
  isActive.value = true
  sleep(ms).then(()=>{
    isActive.value = false
  })
}

const info = (msg: string, ms:number) => {
  console.log('info')
  type.value = MsgType.Info
  isActive.value = true
  message.value = msg
  show(ms)
};

const warning = (msg: string, ms:number) => {
  type.value = MsgType.Warning
  isActive.value = true
  message.value = msg
  show(ms)
};

const error = (msg: string, ms:number) => {
  type.value = MsgType.Error
  isActive.value = true
  message.value = msg
  show(ms)
};

defineExpose({
  info,
  warning,
  error
})

</script>
